import React from 'react'
import { Link, Outlet, useNavigate,useInRouterContext, useOutlet } from 'react-router-dom'

export default function Message() {
    const messageList = [
        {
            id: "001",
            title: "标题1111",
            content: "内容11111"
        },
        {
            id: "002",
            title: "标题222222",
            content: "内容22222"
        },
        {
            id: "003",
            title: "标题33333",
            content: "内容3333"
        },
    ]
    console.log("Message",useInRouterContext())
    console.log("Message-useOutlet",useOutlet())

    const navigate=useNavigate()
    function showDetail(item){
        navigate('detail2',//路径
        // 配置项
        {
            replace:false,//push模式
            // 这里只能传递state参数
            // params参数和search直接拼在路径里面就行
            state:{
                id:item.id,
                title:item.title,
                content:item.content
            }
        })
    }
    return (
        <div>
            <div>Message组件</div>
            {
                messageList.map((item) => {
                    return (
                        <li key={item.id}>
                            <Link to='detail2' state={{ id: item.id, title: item.title, content: item.content }}>{item.title}</Link>
                            <button onClick={() => showDetail(item)}>查看详情</button>
                        </li>
                    )
                })
            }
            <Outlet />
        </div>
    )
}
